<template>
  <div>
    <el-row>

      <div style='padding: 30px;'>
        <el-col :span='12' v-if='index < maxnum' v-for='(item, index) in postsList' :key='item.ID'
                style='padding-left: 5px; padding-top: 15px;'>
          <el-card :body-style="{ padding: '0px'}" class='box-card' shadow='hover'>
            <el-row>
              <el-col :span='12'>
                <div class='grid-content bg-purple' style='padding: 15px;'>
                  <div>
                    <el-popover
                      placement='right'
                      width='400'
                      trigger='hover'>
                      <p style='padding-left: 170px;'>岗位详情</p>
                      <el-descriptions class='margin-top' :column='1'>
                        <el-descriptions-item label='招聘岗位'>{{ item.TITLE }}</el-descriptions-item>
                        <el-descriptions-item label='薪酬待遇'>{{ item.WAGES || '面议' }}</el-descriptions-item>
                        <el-descriptions-item label='职位类别'>{{ item.COMPANY || '-' }}</el-descriptions-item>
                        <el-descriptions-item label='学历要求'>{{ educationTransformation(item.EDUCATION) }}</el-descriptions-item>
                        <el-descriptions-item label='企业名称'>{{ item.COMPANY || '-' }}</el-descriptions-item>
                        <el-descriptions-item label='行业性质'>{{ item.HNAME || item.NAME || '-' }}</el-descriptions-item>
                        <el-descriptions-item label='工作地址'>{{ item.ADDRESS || '-' }}</el-descriptions-item>
                      </el-descriptions>
                      <el-link :underline='false' slot='reference'>
                        <a class='target' href='' target='_blank'></a>
                        <span @click='textButton(item.posts_id)' style='font-size: 16px;'
                              class='aatable-content'>{{ item.TITLE }}</span>
                      </el-link>
                    </el-popover>
                  </div>

                  <div>
                    <div class='grid-content bg-purple-light' style='padding-top: 25px;'>
                      <el-tag size='small'>{{ educationTransformation(item.EDUCATION) || '暂无要求' }}</el-tag>
                    </div>
                  </div>

                  <div style='padding-top: 17px;'>
                    <el-row style='display: flex; justify-content: center; align-items: center;'>
                      <el-col :span='5'>
                        <div class='grid-content bg-purple aatable-content'>
                          <el-avatar :src=item.LOGO></el-avatar>
                        </div>
                      </el-col>
                      <el-col :span='19'>
                        <div class='grid-content bg-purple-light'>
                          <span style='font-size: 16px;' class='aatable-content'>{{ item.COMPANY || '暂无，待更新' }}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>


              <el-col :span='12'>
                <div class='grid-content bg-purple' style='padding: 15px;'>

                  <div class='grid-content bg-purple-light'>
                    <span style='float: right; color: #e03939' class='aatable-content'>{{ item.WAGES || '面议' }}</span>
                  </div>


                  <div class='grid-content bg-purple-light' style='padding-top: 50px;'>
                    <div style='float: right;' class='aatable-content'>{{ item.ADDRESS || '暂无，待更新' }}</div>
                  </div>

                  <div style='padding-top: 50px;'>
                    <el-row style='display: flex; justify-content: center; align-items: center;'>
                      <el-col :span='24'>
                        <div class='grid-content bg-purple'>
                        <span style='float: right; color: #000000' class='aatable-content'>{{ item.HNAME || item.NAME
                          }}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </div>

      <div style='width: 100%; padding-top: 10px;'>
        <el-col :span='24'>
        <el-pagination
          style='float: right'
          background
          @current-change='postCurrentChange'
          :current-page='currentPage'
          :page-size='pageSize'
          layout='total,prev,pager,next'
          :total='totalNumber'>
        </el-pagination>
        </el-col>
      </div>

    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { getPostList } from '@/api/api'

export default {
  name: 'positionRecommendation',
  data() {
    return {
      maxnum: 10,
      postsList: [],
      currentPage: 1,
      pageSize: 10,
      totalNumber: 0,
      keyword: ''
    }
  },

  mounted() {
    // this.getPostList()
  },

  created() {
    this.getPostList()
  },

  methods: {
    educationTransformation(education) {
      if (isNaN(parseFloat(education))) {
        return education
      } else {
        switch (education) {
          case '1':
            return '初中'
          case '2':
            return '高中'
          case '3':
            return '中专'
          case '4':
            return '大专'
          case '5':
            return '本科'
          case '6':
            return '研究生'
          case '7':
            return '其他'
          case '0':
            return '不限'
        }
      }
    },
    textButton(postsId) {
      this.$router.push({
        path: '/home/postDetails',
        query: {
          title: 'postDetails',
          id: postsId
        }
      })
    },

    getPostList() {
      console.log('++++++++',this.$route.query.keyword)
      const data = {
        PAGE: this.currentPage,
        PAGESIZE: this.pageSize,
        KEYWORD: this.$route.query.keyword
      }
      getPostList(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.postsList = res.data.DATA.list
          this.totalNumber = res.data.DATA.totalResult
        }
      })
    },

    postCurrentChange(val) {
      this.currentPage = val
      this.getPostList()
    }
  }
}
</script>

<style scoped>

.aatable-content {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 1;

}

</style>
